const React = require('react');
const {
  View,
  StyleSheet,
} = require('react-native');
const {
  JDDevice,
  JDPasswordDialog,
  JDTouchable,
  JDText,
  JDRouter
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;
const LongPasswordExample = require('./LongPasswordExample');
const ShortPasswordExample = require('./ShortPasswordExample');

class JDPasswordDialogExample extends React.Component {
  state = {
    longPassword: false,
    shortPassword: false,
  };

  componentWillUnfocus = () => {
    if (this.state.longPassword) {
      this._closeDialog('longPassword');
      return true;
    }
    if (this.state.shortPassword) {
      this._closeDialog('shortPassword');
      return true;
    }
    return false;
  };

  render() {
    return (
      <View style={styles.wrapper} 
        onLayout={() => {
            this.shortPassword && this.shortPassword.refreshLayout();
            this.longPassword && this.longPassword.refreshLayout();
        }}>
        <NavigationBar Title="密码输入框组件" />
        <View style={styles.body}>
          <JDTouchable onPress={ () => {this._showDialog('longPassword')} }>
            <View style={styles.btn}>
              <JDText style={styles.btnText}>长密码</JDText>
            </View>
          </JDTouchable>

          <JDTouchable onPress={ () => {this._showDialog('shortPassword')} }>
            <View style={styles.btn}>
              <JDText style={styles.btnText}>短密码</JDText>
            </View>
          </JDTouchable>
        </View>

        <LongPasswordExample
          ref={v=>this.longPassword=v}
          show={this.state.longPassword}
          onClose={() => { this._closeDialog('longPassword'); }}
        />
        <ShortPasswordExample
          ref={v => this.shortPassword = v}  
          show={this.state.shortPassword}
          onClose={() => { this._closeDialog('shortPassword'); }}
        />
      </View>
    );
  }

  _showDialog = (key) => {
    this.setState({
      [key]: true,
    });
  };

  _closeDialog = (key) => {
    this.setState({
      [key]: false,
    });
  };
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  body: {
    flex: 1,
    padding: JDDevice.getRpx(20),
  },
  btn: {
    borderRadius: JDDevice.getDpx(4),
    backgroundColor: '#f23030',
    justifyContent: 'center',
    alignItems: 'center',
    height: JDDevice.getRpx(80),
    marginBottom: JDDevice.getRpx(20),
  },
  btnText: {
    color: '#FFF'
  },

});

module.exports = JDPasswordDialogExample;
